<template>
	<view class="box">
		<view class="orderwrap">
			<view class="orderitem">
				<view class="itemtop">
					<view class="name">
						<image style="width: 38rpx;height: 38rpx;border-radius: 50%;margin-right: 10rpx;"
							:src="info.shop_seller.logo" mode="aspectFill"></image> {{info.shop_seller.name}}
					</view>
				</view>
				<view class="itemcenter">
					<!-- <image src="/static/image/test.png" mode="aspectFill"></image> -->
					<image :src="info.detail.image" mode="aspectFill"></image>
					<view class="itemcenterright">
						<view class="itemcenterrightitem">
							{{info.detail.goods_name}}
						</view>
						<view class="itemcenterrightitem">
							<text class="textone">数量 {{info.detail.num}}件</text>
						</view>
						<view class="itemcenterrightitem">
							￥{{info.detail.price}}
						</view>
					</view>
				</view>
				<view class="order_sn">
					<text>订单编号</text>
					<view class="orderight">
						<text>{{info.order_relation.order_no}}</text>
						<image @click="copyordersn" :src="baseUrl + '/static/icon/copy.png'" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="applywrap"  v-if="info.refund_type==1">
			<view class="tit">
				申请进度
			</view>
			<view class="applymain">
				<image v-if="info.specific_status==0"
					src="https://images.fudiemall.com/storage/default/20250114/1sc0469e2d3b373caf3b90fb21d8da18a02a0ee892.png"
					mode="aspectFill"></image>
				<image v-if="info.specific_status==1"
					src="https://images.fudiemall.com/storage/default/20250114/2se2c5b66a7c20c7c89fdae6a5fa801994328f4d82.png"
					mode="aspectFill"></image>
				<image v-if="info.specific_status==2"
					src="https://images.fudiemall.com/storage/default/20250114/3sa96b354cdb17d206a8f4c24a9dd6aa1b9ce960a5.png"
					mode="aspectFill"></image>
				<image v-if="info.specific_status==5||info.specific_status==6"
					src="https://images.fudiemall.com/storage/default/20250114/4s317bf6475b7d5bf857b71a431338d47668c51228.png"
					mode="aspectFill"></image>
	
			</view>
			<view class="tip" >
				{{info.specific_status_text}}
			</view>
	<!-- 		<view class="tip" v-if="info.specific_status==1||info.specific_status==2">
				平台审核已通过，请按照提示将退货商品寄回
			</view>

			<view class="tip" v-if="info.specific_status==5||info.specific_status==6">
				售后已完成
			</view> -->
		</view>
		<view class="applywrap"  v-if="info.refund_type==3">
			<view class="tit">
				申请进度
			</view>
			<view class="applymain">
				<image v-if="info.specific_status==0"
					src="https://images.fudiemall.com/storage/default/20250411/one73179519b454461c8e83515e663d1b79a93f9c3a.png"
					mode="aspectFill"></image>
	
				<image v-if="info.specific_status==6"
					src="https://images.fudiemall.com/storage/default/20250411/sucdd602936252f792e5b20bc203a1f3ee2a5dc0c56.png"
					mode="aspectFill"></image>
			
			</view>
			<view class="tip" v-if="info.specific_status==0">
				平台审核中
			</view>
			
			<view class="tip" v-if="info.specific_status==6">
				售后已完成
			</view>
		</view>
	
		<view class="imgwrap" v-if="info.refund_type==1" >
			<view class="tit">
				提交退货原因
			</view>
			<view class="ipt">
				{{info.remark}}
			</view>
			<view class="imgmain">
				<image v-for="item in info.remark_images" :src="item.img" mode="aspectFill"></image>

			</view>
			<view class="content">
				注意，因质量问题提交售后申请的商品，拍照时请尽量展现出关键细节，如破损处、瑕疵点、故障点等，方便客服人员处理。最少需提交一张照片，最多可提交五张。
			</view>
		</view>
		<view class="addresswrap" v-if="info.specific_status>0&&info.refund_type==1">
			<view class="tit">
				请将退货商品寄送至以下地址:
				<image class="copy" @click="copy" :src="baseUrl + '/static/icon/copy.png'" mode="aspectFill"></image>
			</view>
			<view class="addwrap">
				<view class="additem ">
					收件人姓名:{{info.refund_address.name}}
				</view>
				<view class="additem">
					收件人电话:{{info.refund_address.phone}}
				</view>
				<view class="additem">
					收件人地址:{{info.refund_address.full_address}}
				</view>
			</view>
			<view class="content">
				注意，请勿寄送到付包裹，如需快递费用补偿，退货完成后，可联系客服人员申请。
			</view>
		</view>
		<view class="selwrap" v-if="info.specific_status>0&&info.refund_type==1">
			<view class="tit">
				请输入退货包裹快递单号
			</view>
			<view class="selitem">
				<text>物流公司</text>
				<view class="name" @click="show=true">
					{{selval}}
					<image :src="baseUrl + '/static/icon/xiala.png'" mode="aspectFill"></image>
				</view>
			</view>
			<view class="selitem">
				<text>快递单号</text>
				<u-input class="ipt" type="text" placeholder="请输入完整快递单号" v-model.trim="indent"> </u-input>
			</view>
			<view class="sub" v-if="info.specific_status==1" @click="submit">
				提交
			</view>
			<view class="wrapsn">
				<u-steps :current="ls" direction="column" activeColor="#FFC300">
					<u-steps-item v-for=" (item,index) in info.delivery_tracks" :key="index" :title="item.context"
						:desc="item.time">
					</u-steps-item>
				</u-steps>
			</view>
			<view class="empty3">
				
			</view>
		</view>
	
		<view class="btnwrap" v-if="info.specific_status!=5">
			<!-- #ifdef MP-WEIXIN -->
				<button  open-type="contact" @contact="">咨询客服</button>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<view class="" style="position: relative;">
				<view class="kefu">咨询客服</view>
				<contact-button class="kefu" tnt-inst-id="Fs0_yOao" scene="SCE01350885" />
			</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<button  @click="goapply" >咨询客服</button>
			<!-- #endif -->
			<view class="next" :style="{ opacity: info.pid === 0 ? '1' : '0.5' }" @click="pdpid()">
				取消申请
			</view>
		</view>
		<view class="btnwrap" v-if="info.specific_status==6" @click="gotklist()">
			<view class="next2" @click="">
				查看退款
			</view>
		</view>
		<u-popup :show="flag" mode="center" @close="flag=false" :closeable="true" bgColor="transparent"
			:closeOnClickOverlay="false">
			<view class="popup-content">
				<text class="popup-title h2">联系客服</text>
				<view class="popup-center" @click="copywx">
					<text>客服微信：{{infos.hot_wechat}}</text>
					<image @click="copywx" :src="baseUrl +'/static/icon/copy.png'" mode="aspectFill"></image>
				</view>
				<view class="popup-center">
					<text>客服电话：{{infos.hot_line}}</text>
					<image @click="copytel" :src="baseUrl +'/static/icon/copy.png'" mode="aspectFill"></image>
				</view>
				<text class="btns" @click="flag=false">确定</text>
			</view>
		</u-popup>
		<u-popup :show="tipShow" mode="center" @close="tipShow=false" :closeable="true" bgColor="transparent"
			:closeOnClickOverlay="false">
			<view class="popup-content">
				<text class="popup-title h2">提示</text>
				<view class="popup-center">
					您确定要取消申请吗
				</view>

				<text class="btns" @click="cancel">确定</text>
			</view>
		</u-popup>
		<u-picker :show="show" :columns="columns" keyName="name" confirmColor="#FFC300" @cancel="show=false"
			@confirm="confirm"></u-picker>
	</view>
</template>

<script>
	import {
		applyrefunddetail,
		company,
		refundReturn,
		cancelorderRefund
	} from "../../api/order.js"
	import {
		setting
	} from "../../api/other.js"
	export default {
		data() {
			return {
				baseUrl: this.$imageBaseUrl,
				status: 1,
				columns: [
					// [{
					//     label: '圆通速递',
					//     // 其他属性值
					//     id: 2021
					//     // ...
					// }, {
					//     label: '韵达快递',
					//     id: 804
					// }]
				],
				show: false,
				selval: "",
				indent: "",
				id: "",
				info: {
					detail: {
						image: ""
					},
					shop_seller: {
						logo: "",
						name: ""
					},
					refund_address: {
						name: "",
						phone: "",
						full_address: ""
					},
					order_relation: {
						order_no: ""
					}
				},
				imglist: [


					"https://fudiemao-1314539356.cos.ap-beijing.myqcloud.com/storage/default/20250108/组21082x74404d4f2505798b44c6c9712b4e7e04155f7241.png",
					"https://fudiemao-1314539356.cos.ap-beijing.myqcloud.com/storage/default/20250108/组21242xafd8416be40b225ae387957c948c37a58265b502.png",
					"https://fudiemao-1314539356.cos.ap-beijing.myqcloud.com/storage/default/20250108/组21252xa95d83dc92bb118412d86c1f9587af9776e2e2c0.png",
					"https://fudiemao-1314539356.cos.ap-beijing.myqcloud.com/storage/default/20250108/组21262xb8ea021b38267f5054eafa868e191184347269fc.png",

				],
				delivery_company_id: "",
				delivery_company: "",
				ls: "",
				infos: {},
				flag: false,
				tipShow: false
			}
		},
		onLoad(e) {
			this.id = e.id
			this.getdetail()
			this.getcompany()
			this.getsetting()
		},

		methods: {
			pdpid(){
				if(this.info.pid==0){
					this.tipShow=true
				}
			},
			
			cancel() {
				
					cancelorderRefund({
						id: this.id
					}).then(res => {
						if (res.code == 1) {
							this.tipShow = false
							setTimeout(() => {
								uni.redirectTo({
									url: "/pageOrder/aboutorder/aftersale"
								})
							}, 1000)
						}
						uni.$u.toast(res.msg);
					})
				
				
			},
			goapply() {
				window.location.href = "https://work.weixin.qq.com/kfid/kfcc9a6800d61bdb24d"
			},
			getsetting() {
				setting().then(res => {
					this.infos = res.data.hot_service
				})
			},
			gotklist() {
				// uni.navigateTo({
				// 	url: "/pageUser/myuser/moreticket"
				// })
				uni.navigateTo({
					url:"/pageOrder/aboutorder/refundlist?id="+this.id
				})
			},
			submit() {
				refundReturn({
					id: this.id,
					delivery_company_id: this.delivery_company_id,
					delivery_company: this.selval,
					delivery_no: this.indent
				}).then(res => {
					if (res.code == 1) {
						setTimeout(() => {
							uni.redirectTo({
								url: "/pageOrder/aboutorder/aftersale"
							})
						}, 1000)
					}
					uni.$u.toast(res.msg);
				})
			},
			copy() {
				uni.setClipboardData({
					data: this.info.refund_address.name + this.info.refund_address.phone + this.info.refund_address
						.full_address,
					success: function() {
						uni.$u.toast('复制成功');
					}
				});
			},
			getcompany() {
				company().then(res => {
					this.columns.push(res.data)
				})
			},
			getdetail() {
				applyrefunddetail({
					id: this.id
				}).then(res => {
					this.info = res.data
					if (res.data.specific_status >= 2&&res.data.refund_type==1) {
						this.selval = res.data.user_ship_delivery.delivery_company
						this.indent = res.data.user_ship_delivery.delivery_no
						this.ls = this.info.delivery_tracks.length
					}
				})
			},
			confirm(e) {
				this.selval = e.value[0].name
				this.delivery_company_id = e.value[0].id
				console.log(e.value)
				this.show = false

			},

			copywx() {
				uni.setClipboardData({
					data: this.infos.hot_wechat,
					success: function() {
						uni.$u.toast('复制成功');
					}
				});

			},
			copytel() {
				uni.makePhoneCall({
					phoneNumber: this.infos.hot_line //仅为示例
				});


			},
			copyordersn() {
				uni.setClipboardData({
					data: this.info.order_relation.order_no,
					success: function() {
						uni.$u.toast('复制成功');
					}
				});
			}



		}
	}
</script>
<style>
	.btnwrap {
		width: 750rpx;
		height: 136rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.btnwrap contact-button {
		width: 226rpx;
		height: 80rpx;
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0 !important;
		z-index: 9999;
	}
	.kefu{
		width: 226rpx;
		height: 80rpx;
		border-radius: 190rpx 190rpx 190rpx 190rpx;
		border: 2rpx solid #FFC300;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFC300;
		text-align: center;
		line-height: 80rpx;
		background: #fff;
	}
</style>
<style lang="scss">
	.box {
		width: 750rpx;
		height: 100vh;

	}

	.orderwrap {
		width: 750rpx;
		margin-top: 40rpx;

		.orderitem {
			width: 690rpx;
			min-height: 280rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin: 0 auto;
			padding-bottom: 30rpx;

			.itemtop {
				display: flex;

				.name {
					margin-top: 38rpx;
					width: 500rpx;
					margin-left: 24rpx;

				}

				.tag {
					margin-top: 38rpx;
					margin-left: 24rpx;
					width: 96rpx;
					height: 42rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 1rpx solid #F63418;
					font-weight: 400;
					font-size: 24rpx;
					color: #F63418;
					text-align: center;
					line-height: 42rpx;
				}

				.tag2 {
					margin-top: 38rpx;
					margin-left: 24rpx;
					width: 96rpx;
					height: 42rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 1rpx solid #999999;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					text-align: center;
					line-height: 42rpx;
				}
			}

			.itemcenter {
				height: 140rpx;
				margin-top: 30rpx;
				margin-left: 24rpx;
				display: flex;

				>image {
					width: 140rpx;
					height: 140rpx;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
				}

				.itemcenterright {
					margin-left: 24rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.itemcenterrightitem {
						// margin-top: 10rpx;
						width: 450rpx;
						// margin-top: 10rpx;
						white-space: nowrap;
						/* 强制文本不换行 */
						overflow: hidden;
						/* 隐藏溢出部分 */
						text-overflow: ellipsis;
						color: #333;
						/* 显示省略号 */
						.textone {
							font-weight: 400;
							font-size: 26rpx;
							color: #666666;
						}

						.texttwo {
							font-weight: 400;
							font-size: 26rpx;
							color: #666666;
							margin-left: 34rpx;
						}
					}
				}
			}

		}
	}
	.additem{
		color: #333;
	}
	.selwrap {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 0 auto;
		margin-top: 44rpx;
		padding-bottom: 30rpx;

		.tit {
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			padding-top: 32rpx;
			margin-left: 24rpx;
		}

		.main {
			width: 650rpx;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.item {
				display: flex;
				flex-direction: column;
				width: 560rpx;
				margin-top: 56rpx;

				.itemtop {
					display: flex;
					align-items: center;

					>image {
						width: 36rpx;
						height: 36rpx;
					}

					>text {
						font-weight: 700;
						font-size: 30rpx;
						color: #3D3D3D;
						margin-left: 20rpx;
					}
				}

				.tip {
					margin-left: 60rpx;
					margin-top: 22rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #999999;
					padding-bottom: 20RPX;
				}
			}
		}
	}

	.btnwrap {
		width: 750rpx;
		height: 136rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-around;

		>button {
			width: 226rpx;
			height: 80rpx;
			border-radius: 190rpx 190rpx 190rpx 190rpx;
			border: 2rpx solid #FFC300;
			font-weight: 400;
			font-size: 36rpx;
			color: #FFC300;
			text-align: center;
			line-height: 80rpx;
			background: #fff;
		}

		.next {
			width: 412rpx;
			height: 80rpx;
			background: linear-gradient( 90deg, #FA2222 2%, #FFC400 98%);
			border-radius: 190rpx 190rpx 190rpx 190rpx;
			text-align: center;
			line-height: 80rpx;
			font-weight: 400;
			font-size: 36rpx;
			color: #FFFFFF;
			margin-right: 40rpx;
		}

		.next2 {
			width: 690rpx;
			height: 80rpx;
			background: linear-gradient( 90deg, #FA2222 2%, #FFC400 98%);
			border-radius: 190rpx 190rpx 190rpx 190rpx;
			text-align: center;
			line-height: 80rpx;
			font-weight: 400;
			font-size: 36rpx;
			color: #FFFFFF;
		}
	}

	.tit {
		font-weight: 700;
		font-size: 30rpx;
		color: #3D3D3D;
		padding-top: 36rpx;
		margin-left: 24rpx;
	}

	.up {
		display: flex;

		margin-left: 60rpx;
		margin-top: 32rpx;
	}

	.applywrap {
		width: 690rpx;
		min-height: 368rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 0 auto;
		margin-top: 24rpx;
		position: relative;
		padding-bottom: 10rpx;
	}

	.tit {
		padding-top: 36rpx;
		margin-left: 24rpx;

	}

	.applymain {
		display: flex;
		position: relative;
		align-items: center;
		height: 150rpx;
		justify-content: center;

		>image {
			margin-top: 20rpx;
			width: 568rpx;
			height: 112rpx;
		}
	}

	.tip {
		width: 500rpx;
		text-align: center;
		margin: 0 auto;
		font-weight: 400;
		font-size: 30rpx;
		color: #3D3D3D;
		margin: 0 auto;
		margin-top: 60rpx;
	}

	.imgwrap {
		width: 690rpx;
		min-height: 468rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 0 auto;
		margin-top: 24rpx;
	}

	.imgmain {
		width: 650rpx;
		display: flex;
		margin: 0 auto;
		margin-top: 40rpx;

		>image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			margin-right: 10rpx;
			margin-left: 10rpx;

		}
	}

	.content {
		width: 642rpx;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 26rpx;
		color: #666666;
		margin: 0 auto;
		margin-top: 50rpx;
		padding-bottom: 30rpx;

	}

	.addresswrap {
		width: 690rpx;
		min-height: 440rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 0 auto;
		margin-top: 24rpx;
	}

	.copy {
		width: 28rpx;
		height: 28rpx;
		margin-left: 10rpx;
	}

	.addwrap {
		width: 660rpx;
		min-height: 216rpx;
		background: #F7F7F7;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 0 auto;
		margin-top: 26rpx;
		padding: 24rpx;

	}

	.selwrap {
		width: 690rpx;
		height: 328rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 0 auto;
		margin-top: 24rpx;
		position: relative;

		.selitem {
			display: flex;
			align-items: center;
			width: 670rpx;
			margin: 0 auto;
			margin-top: 22rpx;

			>text {
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				margin-left: 24rpx;
				margin-right: 14rpx;
			}

			.name {
				width: 516rpx;
				height: 56rpx;
				background: #F7F7F7;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #3D3D3D;
				padding-left: 26rpx;
				line-height: 56rpx;
				position: relative;

				>image {
					width: 17rpx;
					height: 12rpx;
					position: absolute;
					top: 50%;
					right: 2%;
					transform: translate(-50%);
				}
			}

			.ipt {
				width: 516rpx;
				height: 56rpx;
				background: #F7F7F7;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				border: none;
			}

		}

		.sub {
			width: 146rpx;
			height: 56rpx;
			background: linear-gradient( 90deg, #FA2222 2%, #FFC400 98%);
			border-radius: 404rpx 404rpx 404rpx 404rpx;
			text-align: center;
			line-height: 56rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			position: absolute;
			right: 16rpx;
			bottom: 20rpx;
		}
	}

	.wrapsn {
		margin-top: 50rpx;
		background: #fff;
		padding: 30rpx;
	}

	.popup-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 48rpx;
		width: 602rpx;
		background: #FFFFFF;
		border-radius: 22rpx 22rpx 22rpx 22rpx;
		padding-bottom: 30rpx;

	}

	.popup-title {
		margin-top: 40rpx;
		font-weight: 700;
		font-size: 32rpx;
		color: #333333;
	}

	.popup-center {
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: auto;

		>image {
			margin-left: 14rpx;
			width: 20rpx;
			height: 20rpx;
		}
	}

	.btns {
		width: 264rpx;
		height: 72rpx;
		background: linear-gradient( 90deg, #FA2222 2%, #FFC400 98%);
		border-radius: 280rpx 280rpx 280rpx 280rpx;
		text-align: center;
		line-height: 72rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		margin-top: 30rpx;
	}

	.tipwrap {
		width: 602rpx;
		height: 406rpx;
		background: #FFFFFF;
		border-radius: 22rpx 22rpx 22rpx 22rpx;

	}

	.ipt {
		width: 640rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #666666;


	}

	.order_sn {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 650rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #999999;

		.orderight {
			display: flex;
			align-items: center;

			>image {
				width: 26rpx;
				height: 26rpx;
				margin-left: 10rpx;
			}
		}
	}
</style>